<template>
  <div>
  <app-card>
    <template>
      <div class="top">
        <div class="t-left">
          <span style="font-size: 13px; color: pink; font-weight: 400">说明：目前支持学科和关键字条件筛选</span>
          <el-button @click="$router.push('/questions/new')" type="success" icon="el-icon-edit" style="margin-right: 10px">新增试题</el-button>
        </div>
        <el-form ref="form" label-width="100px" label-position="right">
           <el-row type="flex" justify="space-around">
             <el-col :span="6">
                <el-form-item label="学科">
                    <el-select @change="onAllSub" v-model="form.subjectID" placeholder="请选择">
                      <el-option
                        v-for="item in subject"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="二级目录">
                    <el-select v-model="form.catalogID" placeholder="请选择">
                      <el-option
                        v-for="item in catalog"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="标签">
                    <el-select v-model="form.tags" placeholder="请选择">
                      <el-option
                        v-for="item in tags"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="关键字">
                    <el-input v-model="form.keyword" placeholder="根据题干搜索"></el-input>
                </el-form-item>
             </el-col>
           </el-row>
           <el-row type="flex" justify="space-around">
             <el-col :span="6">
                <el-form-item label="试题类型">
                    <el-select v-model="form.questionType" placeholder="请选择">
                      <el-option
                        v-for="item in typeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="难度">
                    <el-select v-model="form.difficulty" placeholder="请选择">
                      <el-option
                        v-for="item in difficultyList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="方向">
                    <el-select v-model="form.direction" placeholder="请选择">
                      <el-option
                        v-for="item in directionList"
                        :key="item"
                        :label="item"
                        :value="item">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="录入人">
                    <el-select v-model="form.creatorID" placeholder="请选择">
                      <el-option
                        v-for="item in userList"
                        :key="item.id"
                        :label="item.username"
                        :value="item.id">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
           </el-row>
           <el-row type="flex" justify="space-around">
             <el-col :span="6">
                <el-form-item label="题目备注">
                    <el-input v-model="form.remarks" placeholder="根据题干搜索"></el-input>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="企业简称">
                    <el-input v-model="form.shortName" placeholder="根据题干搜索"></el-input>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="城市">
                    <el-select @change="onCityChange" v-model="form.city" class="select-row" style="margin-right: 10px" placeholder="请选择">
                      <el-option
                        v-for="item in cityList"
                        :key="item"
                        :label="item"
                        :value="item">
                      </el-option>
                    </el-select>
                    <el-select v-model="form.province" class="select-row" placeholder="请选择">
                     <el-option
                        v-for="item in provinceList"
                        :key="item"
                        :label="item"
                        :value="item">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6" style="text-align: right">
                <el-button size="small" @click="delBtn">清除</el-button>
                <el-button size="small" type="primary" style="margin-right: 10px" @click="onSearch">搜索</el-button>
             </el-col>
           </el-row>
        </el-form>
      </div>
      <el-alert
        :title="'一共' + total + '条数据'"
        type="info"
        :closable="false"
        show-icon>
      </el-alert>
      <el-table
      :data="tableData"
      style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科">
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型">
          <template slot-scope="{ row }">
            <span v-if="row.difficulty === '1'">单选</span>
            <span v-else-if="row.difficulty === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="question"
          label="题干">
          <template slot-scope="{ row }">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间">
          <template slot-scope="{ row }">
            {{ row.addDate | date }}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          width="170px"
          label="难度">
          <template slot-scope="{ row }">
            <span v-if="row.difficulty === '1'">简单</span>
            <span v-else-if="row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          width="170px"
          label="录入人">
        </el-table-column>
        <el-table-column
          label="操作"
          width="195px">
          <template slot-scope="{ row }">
            <el-button type="primary" @click="onView(row)" icon="el-icon-view" circle plain></el-button>
            <el-button type="success"  @click="$router.push('/questions/new?id=' + row.id)" icon="el-icon-edit" circle plain></el-button>
            <el-button type="danger" @click="onDelete(row)" icon="el-icon-delete" circle plain></el-button>
            <el-button type="warning" @click="onCkeck(row.id)" icon="el-icon-check" circle plain></el-button>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="form.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 10px; text-align: right">
    </el-pagination>

    </template>
  </app-card>

  <questions-preview v-if="view" :id="id" @yt="view = false" v-model="view" />
  </div>
</template>

<script>
import AppCard from '@/components/AppCard'
import * as QuesApi from '@/api/hmmm/questions'
import * as SubApi from '@/api/hmmm/subjects'
import { simple } from '@/api/hmmm/directorys'
import { tagsSimple } from '@/api/hmmm/tags'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { userSimple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import dayjs from 'dayjs'
import QuestionsPreview from '../components/questions-preview.vue'
import { Message } from 'element-ui'
export default {
  name: 'BasicQuestions',

  components: {
    AppCard,
    QuestionsPreview
  },

  data () {
    return {
      id: null,
      view: false,
      tableData: [],
      total: null,
      form: {
        page: 1,
        pagesize: 5,
        subjectID: null, // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: null, // 录入人
        catalogID: null // 目录
      },
      subject: [], // 学科列表
      catalog: [], // 二级菜单
      tags: [],
      userList: [], // 录入人
      cityList: [], // 城市
      provinceList: [] // 省份
    }
  },

  methods: {
    // 获取题目列表
    async getQuestionList () {
      const res = await QuesApi.list(this.form)
      this.tableData = res.data.items
      this.total = res.data.counts
    },

    // 获得录入人列表
    async getUserList () {
      const res = await userSimple()
      this.userList = res.data
    },

    // 每页条数改变时触发
    async handleSizeChange (val) {
      this.form.pagesize = val
      const res = await QuesApi.list(this.form)
      this.tableData = res.data.items
    },

    // 页码改变时触发
    async handleCurrentChange (val) {
      this.form.page = val
      const res = await QuesApi.list(this.form)
      this.tableData = res.data.items
    },

    // 获得学科列表
    async getObjectList () {
      const res = await SubApi.simple()
      this.subject = res.data
    },

    // 学科发生改变时触发
    async onAllSub () {
      this.form.catalogID = null
      const directorysRes = await simple(this.form.subjectID)
      this.catalog = directorysRes.data
      const tagsRes = await tagsSimple(this.form.subjectID)
      this.tags = tagsRes.data
    },

    // 城市列表
    AllCitys () {
      this.cityList = provinces()
    },

    // 城市选中框发生变化
    onCityChange (val) {
      this.form.province = ''
      this.provinceList = citys(val)
    },

    // 清除按钮
    delBtn () {
      this.form = {
        subjectID: null, // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: null, // 录入人
        catalogID: null // 目录
      }
    },

    // 搜索按钮
    async onSearch () {
      const res = await QuesApi.list(this.form)
      this.tableData = res.data.items
    },

    // 试题预览
    onView (row) {
      this.id = row.id
      this.view = true
    },

    // 删除题目
    onDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await QuesApi.remove({
          id: row.id
        })
        Message({
          type: 'success',
          message: '删除成功'
        })
      }).catch(() => {
      })
    },

    // 加入精品题库
    onCkeck (id) {
      this.$confirm('是否将该题目加入精品题库', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        iconClass: 'el-icon-info',
        type: 'warning'
      }).then(async () => {
        await QuesApi.choiceAdd({
          id,
          publishState: 1
        })
        Message({
          type: 'success',
          message: '添加成功'
        })
        this.getQuestionList(this.form)
      }).catch(() => {
      })
    }
  },

  created () {
    this.getQuestionList()
    this.getObjectList()
    this.getUserList()
    this.AllCitys()
  },

  filters: {
    date (val) {
      return dayjs(dayjs(val).$d).format('YYYY-MM-DD HH:mm:ss')
    }
  },

  computed: {
    difficultyList () {
      return difficulty
    },

    typeList () {
      return questionType
    },

    directionList () {
      return direction
    }
  }
}
</script>

<style scoped lang='scss'>
.top {
  .t-left {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .el-select {
    width: 300px;
  }

  .el-input {
    width: 300px;
  }

  .select-row {
    width: 145px;
  }
}
</style>
